<!DOCTYPE html>
<html>

<head>
    <title>宠物商店管理平台首页测试</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <style>
        .mynav {}

        .mynav:hover {
            background-color: #9BAEBC;
        }

        .mycenter {
            transform: translateY(20%);
        }

        .mybackground {
            background-image: url("../image/qin.jpg");
        }
    </style>
</head>

<body>
<!--页面主体开始-->
<div class="container-fluid mybackground" style="height: 100vh; width:100vw; padding-top: 10%;">
    <div class="row bg-light mx-auto" style="height: 50vh;width:50vw;padding: 0;">
        <div class="col-4 bg-dark text-center">
            <div class="text-light border-light border-bottom border-2" style="margin-top: 40%;">
                <h1>欢迎登录</h1>
            </div>
        </div>
        <div class="col-8" style="margin-top: 5%;">
            <!--选项开始-->
            <ul id="tabs" class="nav nav-pills nav-tabs justify-content-center" role="tablist">
                <li class="nav-item mx-2" role="presentation">
                    <button class="nav-link active" id="account-tab" data-bs-toggle="tab" data-bs-target="#account"
                            type="button" role="tab" aria-controls="account" aria-selected="true">账号密码登录</button>
                </li>
                <li class="nav-item mx-2" role="presentation">
                    <button class="nav-link" id="phone-tab" data-bs-toggle="tab" data-bs-target="#phone"
                            type="button" role="tab" aria-controls="phone" aria-selected="false">手机号登录</button>
                </li>
            </ul>
            <!--选项结束-->
            <!--选项页面开始-->
            <div class="tab-content" >
                <!--账号密码登录开始-->
                <div class="active fade show tab-pane row px-2 mt-2" id="account">
                    <form id="myForm1"  onsubmit="return false">
                        <div class="mt-3">
                            <label for="username" class="form-label">
                                <h4>账号:</h4>
                            </label>
                            <input type="text" class="form-control border-3" id="username" name="username"
                                   placeholder="账号">
                        </div>
                        <div class="mt-3">
                            <label for="password" class="form-label">
                                <h4>密码:</h4>
                            </label>
                            <input type="password" class="form-control border-3" id="password" name="password"
                                   placeholder="密码">
                        </div>
                        <div class="row mt-5">
                            <div class="col text-center d-grid">
                                <button type="button" class="btn btn-outline-success btn-block"
                                        id="toSignUp-account" onclick="toSignUp()">注册</button>
                            </div>
                            <div class="col text-center d-grid">
                                <button class="btn btn-primary btn-block" id="login-account">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--账号密码登录结束-->
                <!--手机号登录开始-->
                <div class="fade show tab-pane row px-2 mt-2" id="phone">
                    <form id="myForm" onsubmit="return false">
                        <div class="mt-3">
                            <label for="username" class="form-label">
                                <h4>手机号:</h4>
                            </label>
                            <input type="text" class="form-control border-3" id="phoneNumber" name="phoneNumber"
                                   placeholder="手机号">
                        </div>
                        <div class="mt-3">
                            <label for="validateCode" class="form-label">
                                <h4>验证码:</h4>
                            </label>
                            <div class="row">
                                <div class="col-6 d-flex justify-content-center">
                                    <input type="text" class="form-control border-3" id="validateCode"
                                           name="validateCode" placeholder="验证码">
                                </div>
                                <div class="col-6 d-grid">
                                    <button type="button" class="btn btn-outline-primary btn-block"
                                            id="getValidateCode" onclick="onSendValidateCodeClicked()">获取验证码</button>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-5">
                            <div class="col text-center d-grid">
                                <button type="button" class="btn btn-outline-success btn-block" id="toSignUp-phone"
                                        onclick="toSignUp()">注册</button>
                            </div>
                            <div class="col text-center d-grid">
                                <button class="btn btn-primary btn-block" id="login-phone">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--手机号登录结束-->
            </div>
        </div>
    </div>
</div>
<!--页面主体结束-->
<!--提示框开始-->
<div id="successAlert" class="alert alert-success fixed-top alert-dismissible invisible">
    <button type="button" class="btn-close" onclick="hideAlert('successAlert')"></button>
    <p id="successAlertText"><!--这里显示成功的信息--></p>
</div>
<div id="failAlert" class="alert alert-danger fixed-top alert-dismissible">
    <button type="button" class="btn-close" onclick="hideAlert('failAlert')"></button>
    <p id="failAlertText"><!--这里显示失败的信息--></p>
</div>
<!--提示框结束-->

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="/javascripts/loginScripts.js"></script>
</body>

</html>